<template>
  <a-modal :visible="visible" title="护士资格认证审核">
    <a-card>
      <template #title>
        <div style="font-weight: bolder; font-size: 20px">待审核</div>
      </template>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item>
          <a-descriptions title="基本信息" :label-style="itemLabel" layout="vertical" bordered :column="6" class="buisness">
            <a-descriptions-item label="姓名" :label-style="itemLabel">小明</a-descriptions-item>
            <a-descriptions-item label="ID">12345</a-descriptions-item>
            <a-descriptions-item label="性别">12345</a-descriptions-item>
            <a-descriptions-item label="身份证号">12345</a-descriptions-item>
            <a-descriptions-item label="地理位置">12345</a-descriptions-item>
            <a-descriptions-item label="职称">12345</a-descriptions-item>
            <a-descriptions-item label="工作年限">12345</a-descriptions-item>
            <a-descriptions-item label="用户来源">12345</a-descriptions-item>
            <a-descriptions-item label="资格证截止日期">12345</a-descriptions-item>
            <a-descriptions-item label="申请时间">12345</a-descriptions-item>
            <a-descriptions-item label="职业机构">12345</a-descriptions-item>
            <a-descriptions-item label="所属科室">12345</a-descriptions-item>
          </a-descriptions>
        </a-form-item>
        <a-form-item label="护士资格证">
          <a-image :width="100" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
        </a-form-item>
        <a-form-item label="护士执业证">
          <a-image :width="100" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
        </a-form-item>
        <a-form-item label="拒绝原因"> 11111111 </a-form-item>
      </a-form>
      <!-- 底部内容 -->
      <a-row>
        <a-divider></a-divider>
        <template v-if="isEdit == 1">
          <a-col :span="4" :offset="6">
            <a-button type="danger" @click="reject">拒绝</a-button>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-button type="primary" @click="pass">通过</a-button>
          </a-col>
        </template>
        <a-col :span="4" :offset="isEdit == 1 ? 1 : 12">
          <a-button type="info" @click="back">返回</a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 拒绝审核-->
    <a-modal :destroyOnClose="true" v-model:visible="rejectVisible" title="原因填写" @ok="handleOk" ok-text="提交" :closable="true">
      <a-form ref="reasonRef" :model="reasonForm" :rules="rules">
        <a-form-item label="主述" name="value">
          <a-textarea :value="reasonForm.value"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-modal>
</template>
<script>
import { onMounted, ref, reactive, createVNode } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useModal } from '@/hooks'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const isEdit = route.query.isEdit
    const reasonRef = ref('')
    const reasonForm = reactive({
      value: ''
    })
    const rejectVisible = ref(false)

    const rules = {
      value: [{ required: true, message: '请填写原因!', trigger: 'blur' }]
    }
    // 回退到上一页
    const back = () => {
      router.go(-1)
    }
    const handleOk = e => {
      reasonRef.value
        .validate()
        .then(() => {
          //    visible.value = false;
        })
        .catch(error => {})
    }
    const reject = () => {
      rejectVisible.value = true
    }
    const pass = () => {
      const { closeModal } = useModal.confirm({
        title: '确认通过此护士资格认证吗？',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          visible.value = false
        }
      })
    }

    onMounted(() => {})
    return {
      isEdit,
      back,
      reasonRef,
      reasonForm,
      rejectVisible,
      rules,
      handleOk,
      reject,
      pass,
      labelCol: { style: { width: '100px', fontWeight: 'bolder' } },
      wrapperCol: { span: 20, offset: 1 },
      itemLabel: { color: '#2a9d8f', fontWeight: 'bolder' }
    }
  },

  components: {
    ExclamationCircleOutlined
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: ''
    }
  }
}
</script>

<style scoped></style>
